<template>
  <el-dialog title="恢复分配" :close-on-click-modal="false" :visible.sync="visible" width="80vw" @close="closeYm()">
    <div style="overflow-y: auto;overflow-x:hidden;height: 600px;">
      <div style="width: 98%">
        <el-card class="box-card" style="margin: 10px 15px 20px 10px;">
          <el-table :data="dataList" style="width: 100%;margin-bottom: 20px"
                    row-key="id" height="30vh" border default-expand-all ref="table"
                    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
            <el-table-column type="index" label=" " min-width="20" align="center">
              <template slot-scope="scope">
                <el-radio v-model="radio" :label="scope.row.id" :disabled="scope.row.ffZt == '审批通过'?false:true"><span></span></el-radio>
              </template>
            </el-table-column>
            <el-table-column prop="jjMc" label="奖金名称" header-align="center" align="left" min-width="200"></el-table-column>
            <el-table-column prop="jjZe" label="奖金总额(元)" header-align="center" align="right" min-width="100">
              <template slot-scope="scope">
                {{ $formatNum(scope.row.jjZe) }}
              </template>
            </el-table-column>
            <el-table-column prop="jjYe" label="奖金余额(元)" header-align="center" align="right" min-width="100">
              <template slot-scope="scope">
                {{ $formatNum(scope.row.jjYe) }}
              </template>
            </el-table-column>
            <el-table-column prop="fpZt" label="分配审批" header-align="center" align="center" min-width="100">
              <template slot-scope="scope">
                <span :class="Zt(scope.row.fpZt)" v-if="scope.row.bmJj>0">{{ scope.row.fpZt }}</span>
                <span v-else>没有分配</span>
              </template>
            </el-table-column>
            <el-table-column prop="ffZt" label="发放审批" header-align="center" align="center" min-width="100">
              <template slot-scope="scope">
                <span :class="Zt(scope.row.ffZt)" v-if="scope.row.bmJj==0">{{ scope.row.ffZt }}</span>
                <span v-else-if="scope.row.fpZt!='审批通过'">等待分配</span>
                <span v-else-if="scope.row.bmSl!=scope.row.bmFfspSl">{{ scope.row.bmFfspSl }}/{{ scope.row.bmSl }}</span>
                <span :class="Zt(scope.row.ffZt)" v-else>{{ scope.row.ffZt }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" header-align="center" align="center" min-width="110">
              <template slot-scope="scope">
                <el-button type="primary" plain @click="showXq(scope.row.pid,scope.row.jjMc)">详情查看
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>

        <el-card class="box-card" style="margin: 10px 15px 20px 10px;" v-show="showXqIf">
          <div slot="header" class="clearfix">
            <span class="blue">{{ nameTag }}部门分配详情</span>
          </div>
          <deptDetails ref="deptDetails"></deptDetails>
        </el-card>

        <el-card class="box-card" style="margin: 10px 15px 20px 10px;" v-show="showXqIf">
          <div slot="header" class="clearfix">
            <span class="blue">{{ nameTag }}员工分配详情</span>
          </div>
          <persionDetails ref="persionDetails"></persionDetails>
        </el-card>
      </div>
    </div>


    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="dataFormSubmit()" v-if="canSubmit">恢复</el-button>
      <el-button type="primary" plain @click="visible = false">取消</el-button>
    </span>
  </el-dialog>
</template>

<script>
/*!
 * 绩效考核-奖金分配-恢复分配
 *
 * @author zmk
 * @date 2021-09-10 14:11:35
 */
import {saveRecovery, selZjfpxx} from '@/api/jiangjin/jiangjinfpjjfpdjb';
import deptDetails from './workflowView/deptDetails'
import persionDetails from './workflowView/persionDetails'
import {
  workForlwRescind
} from '@/api/jiangjin/jiangjinfpjjfpdjb'

export default {
  components: {
    persionDetails,
    deptDetails,
  },
  data() {
    return {
      visible: false,
      canSubmit: false,
      radio: '',
      dataList: [],
      fpId: '',
      nameTag: '',
      showXqIf:false,
    }
  },
    methods: {
    //关闭页面
    closeYm(){
      this.showXqIf=false;
    },
    //详情查看
    showXq(id,name){
      this.loadData(id);
      this.nameTag = name;
    },
    //初始化
    csh() {
      this.dataList = [];
      this.fpId = '';
      this.radio = '';
    },
    //调用基础方法
    init(id) {
      this.csh();
      this.fpId = id;
      this.visible = true;
      this.canSubmit = true;
      this.$nextTick(() => {
        selZjfpxx(id).then(res => {
          this.dataList = this.getTree(res.data.data, id);
          this.$nextTick(() => {
            this.$refs.table.doLayout();
          })
        });
      })
    },
    //加载数据
    loadData(id) {
      this.showXqIf=false;
      workForlwRescind(id).then(response => {
        let obj = response.data.data;
        this.dataForm = response.data.data;
        let jjxTjXq = JSON.parse(obj.jiangjinFpJjfpdjb.jjxTjXq);
        this.$refs.deptDetails.init(obj.bmXq, jjxTjXq)
        this.$refs.persionDetails.init(obj.grXq, jjxTjXq)
        this.showXqIf=true;
      });
    },
    //数据tree结构化
    getTree(list, pid) {
      return list.filter(v => {
        if (v.pid === pid) {
          return v
        }
      }).map(v => {
        const children = this.getTree(list, v.id);
        if (children.length) {
          v.children = children;
        }
        return v
      });
    },
    //状态
    Zt(value) {
      return {
        red: value === "审批中",
        green: value === "审批通过"
      };
    },
    // 表单提交
    dataFormSubmit() {
      //结束大于等于开始
      if (this.radio == '') {
        this.$notify.closeAll();
        this.$notify.error("请先选择后在操作");
        return;
      }

      this.canSubmit = false;
      saveRecovery(this.fpId, this.radio).then(data => {
        this.$notify.closeAll();
        this.$notify.success('恢复成功')
        this.visible = false
        this.$emit('refreshDataList')
      }).catch(() => {
        this.canSubmit = true;
      });
    },
  }
}
</script>
<style scoped>
</style>
